<template>
<div class="hang-home">
  <div class="hang">
    <h3>每日新鲜推荐</h3>
  </div>
  <div class="wrapper" ref="wrapper">
    <ul class="content" ref="content">
        <li v-for="(item, index) in wrapperlist" :key="index">
              <span>{{ item.playCount | numFilter(1) }}万</span>
              <img :src="item.coverImgUrl" radius="10rem" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
</div>
</template>
<script>
// import { betterScrollHorizontal } from "../../common/betterScroll.js";
export default {
  data() {
    return {
      wrapperlist: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/top/playlist?limit=6").then((res) => {
        console.log(res);
        this.wrapperlist = res.playlists;
        // betterScrollHorizontal(
        //   this,
        //   this.$refs.wrapper,
        //   this.$refs.content,
        //   this.wrapperlist.length,
        //   9
        // );
      });
    },
  },
  filters: {
    numFilter(value, num) {
      return parseFloat(value / 10000).toFixed(num);
    },
  },
};
</script>
<style scoped>
.wrapper {
  width: 100%;
  overflow: hidden;
}
ul.content li {
  display: inline-block;
  position: relative;
  width: 7rem;
  vertical-align: top;
}
ul.content li img {
  width: 100%;
  border-radius: 10px;
}
ul.content li span {
  font-size: 0.8rem;
  color: #54493b;
}
ul.content li span:first-child {
  position: absolute;
  z-index: 99;
  right: 0;
  background-color: rgb(182, 255, 204);
  border-radius: 3px;
}
ul.content li {
  margin: 0.5rem;
}
</style>